// import { login, logout, getInfo } from '@/api/user'
// import { getToken, setToken, removeToken } from '@/utils/auth'
// import { resetRouter } from '@/router'

// const getDefaultState = () => {
//   return {
//     token: getToken(), // 设置token初始状态   token持久化 => 放到缓存中
//     name: '',
//     avatar: ''
//   }
// }

// const state = getDefaultState()

// const mutations = {
//   RESET_STATE: (state) => {
//     Object.assign(state, getDefaultState())
//   },
//   SET_TOKEN: (state, token) => {
//     state.token = token
//   },
//   SET_NAME: (state, name) => {
//     state.name = name
//   },
//   SET_AVATAR: (state, avatar) => {
//     state.avatar = avatar
//   }
// }

// const actions = {
//   // user login
//   login({ commit }, userInfo) {
//     const { username, password } = userInfo
//     return new Promise((resolve, reject) => {
//       login({ username: username.trim(), password: password })
//         .then((response) => {
//           const { data } = response
//           commit('SET_TOKEN', data.token)
//           setToken(data.token)
//           resolve()
//         })
//         .catch((error) => {
//           reject(error)
//         })
//     })
//   },

//   // get user info
//   getInfo({ commit, state }) {
//     return new Promise((resolve, reject) => {
//       getInfo(state.token)
//         .then((response) => {
//           const { data } = response

//           if (!data) {
//             return reject('Verification failed, please Login again.')
//           }

//           const { name, avatar } = data

//           commit('SET_NAME', name)
//           commit('SET_AVATAR', avatar)
//           resolve(data)
//         })
//         .catch((error) => {
//           reject(error)
//         })
//     })
//   },

//   // user logout
//   logout({ commit, state }) {
//     return new Promise((resolve, reject) => {
//       logout(state.token)
//         .then(() => {
//           removeToken() // must remove  token  first
//           resetRouter()
//           commit('RESET_STATE')
//           resolve()
//         })
//         .catch((error) => {
//           reject(error)
//         })
//     })
//   },

//   // remove token
//   resetToken({ commit }) {
//     return new Promise((resolve) => {
//       removeToken() // must remove  token  first
//       commit('RESET_STATE')
//       resolve()
//     })
//   }
// }

// export default {
//   namespaced: true,
//   state,
//   mutations,
//   actions
// }
// 状态

// import { getToken, setToken, removeToken } from '@/utils/auth'
// import { login } from '@/api/user'

// const state = {
//   token: getToken() // 设置token初始状态   token持久化 => 放到缓存中
// }
// // 修改状态
// const mutations = {
//   // 设置token
//   setToken(state, token) {
//     state.token = token // 设置token  只是修改state的数据  123 =》 1234
//     // vuex变化 => 缓存数据
//     setToken(token) // vuex和 缓存数据的同步
//   },
//   // 删除缓存
//   removeToken(state) {
//     state.token = null // 删除vuex的token
//     removeToken() // 先清除 vuex  再清除缓存 vuex和 缓存数据的同步
//   }
// }
// // 执行异步
// const actions = {
//   // 定义login action  也需要参数 调用action时 传递过来的参数
//   async login(context, data) {
//     const result = await login(data) // 实际上就是一个promise  result就是执行的结果
//     // axios默认给数据加了一层data
//     if (result.data.success) {
//       // 表示登录接口调用成功 也就是意味着你的用户名和密码是正确的
//       // 现在有用户token
//       // actions 修改state 必须通过mutations
//       context.commit('setToken', result.data.data)
//     }
//   }
// }

// export default {
//   namespaced: true,
//   state,
//   mutations,
//   actions
// }

// 不要犹豫，直接删除, 里面的内容自己实现
// 提供一个默认的配置项
// 我们把token设置到本地存储的目的是什么?

// 当我们的界面刷新的时候，我们会从本地存储里面取到token
// 把获取到的token存到vuex
// 存到vuex之后，后面项目使用token的时候直接从vuex取值即可
import { getToken, removeToken, setTimeStamp, setToken } from '@/utils/auth'
import { login } from '@/api/user'
// getInfo, getUserDetailById,

// 获取到token之后
// 1、存储vuex
// 2、存储本地存储

// 1、actions下面的login请求了登录的接口，传入接口所需要的数据(调用dispatch传递过来的)，返回的结果进行打印
// 2、utils/request 添加baseUrl: '/api' （接口定义的）

export default {
  namespaced: true, // 开启命名空间
  state: {
    token: getToken(), // 默认的token值
    userInfo: {} // 存储用户信息的state
  },
  mutations: {
    setToken(state, token) {
      state.token = token
    },
    setUserInfo(state, payload) {
      // 存储用户信息的mutations
      state.userInfo = payload
    },
    removeUserInfo(state) {
      // 清除个人信息
      state.userInfo = {}
    },
    removeToken(state) {
      //  清空用户token
      state.token = null
      //  本地存储
      removeToken()
    }
  },
  actions: {
    // 登录的action
    async login(context, data) {
      const res = await login(data)
      context.commit('setToken', res.token)
      setToken(res.token)
      //   存储一个时间戳
      //  方便后面处理token失效逻辑
      setTimeStamp(Date.now())
    },
    //  获取个人信息的action
    // 获取到的个人信息存储vuex
    // async getUserInfo(context) {
    //   // 目前的接口里面是没有头像数据的
    //   // 我们个人信息存储在两个接口里面的
    //   // 如果我们想要拿到所有的个人信息
    //   // 需要调用两个接口，把返回的结果进行合并
    //   const res = await getInfo()
    //   const avatarInfo = await getUserDetailById(res.userId) // 这里的userId是从上一个接口获取到的
    //   const allUserInfo = {
    //     ...res,
    //     ...avatarInfo
    //   }
    //   context.commit('setUserInfo', allUserInfo)
    // },

    // logOut({ commit }) {
    //   //  清除用户的token
    //   //  1、本地存储
    //   //  2、vuex
    //   //  清除用户的个人信息
    //   //  只有vuex里面有
    //   commit('removeToken')
    //   commit('removeUserInfo')
    // }
    // 登出的action
    logout(context) {
      // 删除token
      context.commit('removeToken') // 不仅仅删除了vuex中的 还删除了缓存中的
      // 删除用户资料
      context.commit('removeUserInfo') // 删除用户信息
    }
  }
}

// token失效的处理逻辑
// 1、前端主动介入的处理逻辑
//      1、登录接口会返回一个token
//      2、存储token的时候，我们同时也会存储一个时间戳到本地
// 2、后端处理失效逻辑(返回给前台401)
